<template>
	<!-- 我的资产--优惠卷 -->
	<view class="content">
		<view class="banner">
			<image src="../../static/user/coupon.png" mode=""></image>
		</view>
		<view class="">
			<view class="wrap">
				<view class="u-tabs-box">
					<u-tabs-swiper activeColor="#1E6DF2" ref="tabs" :list="list" :current="current" @change="change"
						:is-scroll="false" swiperWidth="750" bar-height="4" bar-width="84" gutter="0"
						:bar-style="barStyle"></u-tabs-swiper>
				</view>
				<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
					@animationfinish="animationfinish">
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height: 100%;width: 100%;">
						<!-- 全部 -->
						<view class="all">
							<view class="all-left">
								<view class="">
									10<text>元</text>
								</view>
								<view>满￥15可用</view>
							</view>
							<view class="all-right">
								<text>停车抵扣卷</text>
								<text>旗峰路金源花园停车缴费..</text>
								<text>2023-09-10至2023-12-30</text>
							</view>
							<view class="use">
								立即使用
							</view>
						</view>
						<view class="all">
							<view class="all-left all-expire">
								<view class="">
									10<text>元</text>
								</view>
								<view>满￥15可用</view>
							</view>
							<view class="all-right">
								<text>停车抵扣卷</text>
								<text>旗峰路金源花园停车缴费..</text>
								<text>2023-09-10至2023-12-30</text>
							</view>
							<view class="expire">
								已过期
							</view>
						</view>
						<view class="all">
							<view class="all-left all-used">
								<view class="">
									10<text>元</text>
								</view>
								<view>满￥15可用</view>
							</view>
							<view class="all-right">
								<text>停车抵扣卷</text>
								<text>旗峰路金源花园停车缴费..</text>
								<text>2023-09-10至2023-12-30</text>
							</view>
							<view class="expire used">
								已使用
							</view>
						</view>
						</scroll-view>
					</swiper-item>
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height: 100%;width: 100%;">
						<!--待使用  -->
						<view class="">
							<view class="all">
								<view class="all-left">
									<view class="">
										10<text>元</text>
									</view>
									<view>满￥15可用</view>
								</view>
								<view class="all-right">
									<text>停车抵扣卷</text>
									<text>旗峰路金源花园停车缴费..</text>
									<text>2023-09-10至2023-12-30</text>
								</view>
								<view class="use">
									立即使用
								</view>
							</view>
						</view>
						</scroll-view>
					</swiper-item>
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height: 100%;width: 100%;">
						<!--已过期  -->
						<view class="">
							<view class="all">
								<view class="all-left all-expire">
									<view class="">
										10<text>元</text>
									</view>
									<view>满￥15可用</view>
								</view>
								<view class="all-right">
									<text>停车抵扣卷</text>
									<text>旗峰路金源花园停车缴费..</text>
									<text>2023-09-10至2023-12-30</text>
								</view>
								<view class="expire">
									已过期
								</view>
							</view>
						</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '全部'
					},
					{
						name: '待使用'
					},
					{
						name: '已过期'
					}
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				barStyle: {
					marginBottom: '-4rpx'
				},
			}
		},
		methods: {
			change(index) {
				this.swiperCurrent = index;

			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			datatime(e) {
				console.log(e.endDate);
				this.endDate = e.endDate
				this.startDate = e.startDate
			}
		}
	}
</script>

<style lang="scss">
	@import "index.scss"
</style>